<div class="hero">
  <div class="upload-box">

    <div class="upload-box-header">
      <div class="control-circles">
        <span class="circle is-green"></span>
        <span class="circle is-yellow"></span>
        <span class="circle is-red"></span>
      </div>
      <div class="header-title">
        <h2>Uploads</h2>
      </div>
      <div class="header-title">
        <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
      </div>
    </div>

    <div class="upload-box-content">
      <div class="drop-container" ngFileDrop [options]="options"
           (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput">
        <p>
          Drag files here or
          <label class="upload-button">
            <input type="file" ngFileSelect [options]="options"
                   (uploadOutput)="onUploadOutput($event)" [uploadInput]="uploadInput" multiple>
            browse
          </label>
          to upload.
        </p>
      </div>

      <div class="upload-item" *ngFor="let f of files; let i = index;">
        <div class="upload-item-content">
          <div class="filename">
            <i class="ionicon ion-ios-copy"></i>
            <span>{{ f.name }}</span>
          </div>
          <div class="progress-content">
            <div class="progress">
              <span class="bar" [style.width]="f?.progress?.data?.percentage + '%'"
                    [class.is-done]="f?.progress?.data?.percentage === 100"></span>
            </div>
          </div>
          <div class="progress-text-content">
                    <span class="progress-text"
                          [class.is-done]="f?.progress?.data?.percentage === 100">
                      <span>{{ f.progress?.data?.percentage }}% </span>
                      <span *ngIf="f.progress?.data?.percentage !== 100">Uploading...</span>
                      <span *ngIf="f.progress?.data?.percentage === 100">Done</span>
                    </span>
            <span class="speed-and-eta-text"
                  *ngIf="f.progress?.data?.percentage !== 0 && f.progress?.data?.percentage !== 100">
                      <span>{{ f.progress?.data?.speedHuman }} </span>
                      <span>ETA {{ f.progress?.data?.etaHuman }}</span>
                    </span>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
